<template>
	<view class="content" :style="{'padding-top':top+'rpx'}">
		<Navbar title="发布随拍" bgColor="#da708b" :backIcon="false" url="" style="color: #ffffff;"></Navbar>
		<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select" @progress="progress"
			@success="success" @fail="fail" @delete="deletes" :limit="9" :sizeType="['compressed']" />
		<uni-easyinput placeholder="添加标题会有更多赞哦~" placeholder-style="font-size:32rpx;color:#555555" v-model="blogTitle"></uni-easyinput>
		<editor @blur="inputText" @input="inputText" placeholder="添加正文"></editor>
		<view class="options">
			<view class="first" @click="publicClick">
				<uni-icons type="locked"  class="heading"></uni-icons>
				公开可见
				<text class="text" v-if="blogStatus==='PUBLICITY'">公开可见</text>
				<text class="text" v-if="blogStatus==='PRIVACY'">仅自己可见</text>
				<uni-icons type="forward"  class="tail"></uni-icons>
			</view>
			<view v-if="publicity===true" class="publiclyVisible" @click="publiclyVisible">
				公开可见
				<uni-icons type="checkmarkempty"  class="tail" v-if="blogStatus==='PUBLICITY'"></uni-icons>
			</view>
			<view v-if="publicity===true" class="beVisibleOnlyToOneself" @click="beVisibleOnlyToOneself">
				仅自己可见
				<uni-icons type="checkmarkempty"  class="tail" v-if="blogStatus==='PRIVACY'"></uni-icons>
			</view>
			<view @click="addLocation">
				<uni-icons type="location"  class="heading"></uni-icons>
				添加地点
				<text class="location">{{blogAddress}}</text>
				<uni-icons type="forward"  class="tail"></uni-icons>
			</view>
		</view>
		<view class="tailButton">
			<view class="drafts" @click="draft">
				<uni-icons type="mail-open"></uni-icons>
				<text class="text">草稿箱</text>
			</view>
			<button size="mini" @click="publish">发布随拍</button>
		</view>
		<view>
			<uni-popup ref="publishpopup" background-color="#fff" type="center" :is-mask-click="false"
				mask-background-color="rgba(0,0,0,0)">
				<view class="publishpopup">
					<view class="verify"><image src="../../static/queren.png"></image><text>确认</text></view>
					<view class="success">发布成功!</view>
					<button size="mini" @click="publishok">确定</button>
				</view>
			</uni-popup>
		</view>
		<view>
			<uni-popup ref="draftspopup" background-color="#fff" type="center" :is-mask-click="false"
				mask-background-color="rgba(0,0,0,0)">
				<view class="draftspopup">
					<view class="verify">提示</view>
					<view class="success">文档已保存到草稿箱</view>
					<button size="mini" @click="draftsok">确定</button>
				</view>
			</uni-popup>
		</view>
		<view v-show="prompt">
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog" :is-mask-click="false">
				<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确认" title="提示"
					:content="text" @close="close" @confirm="close"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted
	} from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const url = getApp().globalData.blogurl
	const platform = ref()
	const statusBar = ref()
	const customBar = ref()
	const top = ref()
	const imageValue = ref([])
	const imglist = ref([])
	const blogTitle=ref()
	const blogContent = ref("")
	const publicity = ref(false)
	const blogStatus = ref('PUBLICITY')
	const blogAddress=ref()
	const publishpopup = ref()
	const draftspopup = ref()
	const msgType = ref('error')
	const alertDialog = ref()
	const prompt = ref()
	const text = ref()
	const getColumnHeight=()=>{
		uni.getSystemInfo({
			success(res) {
				console.log(res)
				platform.value = res.platform
				// #ifdef MP-WEIXIN
				statusBar.value = res.statusBarHeight
				const custom = wx.getMenuButtonBoundingClientRect()
				customBar.value = custom.bottom + custom.top - res.statusBarHeight
				// #endif
				// #ifdef APP-PLUS
				statusBar.value = res.statusBarHeight
				customBar.value = res.statusBarHeight + 45
				// 这里是在安卓手机上加上 3 像素（当时好像是在安卓水滴屏上，系统导航栏高度较低才加上去的，大家可以真机自己调试一下）
				if (res.platform == "android") {
					statusBar.value += 3
					customBar.value += 3
				}
				// #endif
			}
		})
		top.value = statusBar.value * 2 + (customBar.value - statusBar.value) * 2
		console.log(statusBar.value, customBar.value, top.value)
	}
	onMounted(()=>{
		getColumnHeight()
	})
	const inputText = (e) => {
		console.log(e.detail.html)
		blogContent.value = e.detail.html
	}
	const select = (e) => {
		imglist.value.push(...e.tempFilePaths)
		console.log('选择文件：', e)
		console.log(imglist.value)
	}
	const progress = (e) => {
		console.log('上传进度：', e)
	}
	const success = (e) => {
		console.log(imageValue)
		console.log('上传成功：', e)
	}
	const fail = (e) => {
		console.log('上传失败：', e)
	}
	const deletes = (e) => {
		for (let i = 0; i < imglist.value.length; i++) {
			if (imglist.value[i] === e.tempFilePath) {
				imglist.value.splice(i, 1)
			}
		}
		console.log("删除", imglist.value, e)
	}
	const addLocation = () => {
		uni.chooseLocation({
			success: function(res) {
				console.log(res)
				blogAddress.value=res.name
			},
			fail: (err) => {
				console.log(err)
			}
		});
	}
	const publicClick = () => {
		publicity.value = !publicity.value
	}
	const publiclyVisible = () => {
		blogStatus.value = "PUBLICITY"
		publicity.value = !publicity.value
	}
	const beVisibleOnlyToOneself = () => {
		blogStatus.value = "PRIVACY"
		publicity.value = !publicity.value
	}
	const publish = () => {
		console.log("发布")
		console.log(imglist.value,blogTitle.value,blogContent.value,blogStatus.value,blogAddress.value)
		if(imglist.value.length===0||blogTitle.value===""||blogTitle.value===undefined||blogContent.value===""||blogAddress.value===undefined||blogStatus.value===""){
			prompt.value = true
			dialogToggle("error")
			text.value="请把随拍信息填写完整"
		}else{
			uni.request({
				url: url + "/add",
				method: "POST",
				dataType: "json",
				header: {
					'content-type': 'application/json',
					'Access-Control-Allow-Origin': "*",
					'Authorization': uni.getStorageSync('token')
				},
				data: {
					blogAddress:blogAddress.value,
					blogTitle:blogTitle.value,
					blogContent:blogContent.value,
					blogStatus:blogStatus.value
				},
				success: function(res) {
					console.log(res.data.value)
					for(let i=0;i<imglist.value.length;i++){
						if(i===0){
							uni.uploadFile({
								url: url + '/image/add',
								filePath: imglist.value[i],
								name: 'file',
								header: {
									'content-type': 'application/json',
									'Access-Control-Allow-Origin': "*",
									'Authorization': uni.getStorageSync('token')
								},
								formData: {
									blogId:res.data.value,
									blogCover:"true",
									blogImgSort:i
								},
								success: (uploadFileRes) => {
									console.log(1,uploadFileRes);
									if(i===imglist.value.length-1){
										publishpopup.value.open()
									}
								}
							})
						}else{
							uni.uploadFile({
								url: url + '/image/add',
								filePath: imglist.value[i],
								name: 'file',
								header: {
									'content-type': 'application/json',
									'Access-Control-Allow-Origin': "*",
									'Authorization': uni.getStorageSync('token')
								},
								formData: {
									blogId:res.data.value,
									blogCover:"false",
									blogImgSort:i
								},
								success: (uploadFileRes) => {
									console.log(2,uploadFileRes);
									if(i===imglist.value.length-1){
										publishpopup.value.open()
									}
								}
							})
						}
					}
				}
			})
		}
	}
	const draft = () => {
		console.log("草稿")
		draftspopup.value.open()
	}
	const publishok=()=>{
		publishpopup.value.close()
		// uni.reLaunch({
		// 	url:"/pages/releaseSnap/releaseSnap"
		// })
		uni.navigateBack({
			delta:1
		})
	}
	const draftsok=()=>{
		draftspopup.value.close()
	}
	const dialogToggle = (type) => {
		msgType.value = type
		alertDialog.value.open()
	}
	onShow(()=>{
		const now = new Date().getTime()
		if (!uni.getStorageSync('token') || now > uni.getStorageSync('expireTime')) {
			uni.reLaunch({
				url: "/pages/login/login"
			})
		}
	})
</script>

<style lang="less">
	.content {
		padding-top: 168rpx;
		min-height: calc(100vh - 288rpx);
		background-image: linear-gradient(to bottom, #d95e7d, #ffffff);
		padding-bottom: 120rpx;
	}

	.uni-file-picker {
		padding: 20rpx;
		z-index: 0;
	}

	.uni-easyinput {
		margin-top: 20rpx;
	}

	.icon-del-box {
		z-index: 0 !important;
	}

	.file-picker__progress {
		z-index: 0 !important;
	}

	.uni-easyinput__content {
		background-color: transparent !important;
		border: none !important;
		border-bottom: 2rpx #555555 solid !important;
	}

	.ql-container {
		height: 600rpx;
		padding: 10rpx;
	}

	.ql-editor.ql-blank:before {
		color: #555555;
		font-size: 32rpx;
		font-style: normal;
	}

	.options {
		margin-top: 20rpx;
		background-color: transparent;
		height: 300rpx;
		position: relative;
		view {
			border-bottom: 3rpx solid #555555;
			height: 90rpx;
			line-height: 90rpx;
			position: relative;
			padding-left: 40rpx;
			vertical-align: middle;
			display: flex;

			.heading {
				margin-right: 10rpx;
			}

			.tail {
				position: absolute;
				right: 40rpx;
			}

			.text {
				position: absolute;
				right: 90rpx;
			}
			.location{
				position: absolute;
				right: 90rpx;
				width: 400rpx;
				display: inline-block;
				height: 90rpx;
				overflow: hidden;
				white-space:nowrap;
				text-overflow:ellipsis;
				text-align: right;
			}
		}

		.first {
			border-top: 3rpx solid #555555;
		}

		.publiclyVisible {
			position: absolute;
			z-index: 1;
			background-color: #ffffff;
			width: 100vw;
			border: none;
			border-bottom: none;
			height: 95rpx;

			.tail {
				position: absolute;
				right: 80rpx;
			}
		}

		.beVisibleOnlyToOneself {
			position: absolute;
			z-index: 1;
			top: 180rpx;
			background-color: #ffffff;
			width: 100vw;
			border: none;
			border-bottom: 0rpx;
			height: 95rpx;

			.tail {
				position: absolute;
				right: 80rpx;
			}
		}
	}

	.tailButton {
		width: 100vw;
		height: 120rpx;
		background-color: #dddddd;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-evenly;

		.drafts {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			height: 100rpx;

			.uni-icons {
				border: #ffffff solid 4rpx;
				border-radius: 50%;
				padding: 4rpx;
			}

			.text {
				font-size: 22rpx;
			}
		}

		button {
			width: 500rpx;
			height: 80rpx;
			border-radius: 40rpx;
			line-height: 80rpx;
			background-color: #d95e7d;
			color: #ffffff;
			margin: 0;
		}
	}

	.uni-popup__wrapper {
		border-radius: 20rpx !important;
	}

	.publishpopup {
		width: 680rpx;
		height: 350rpx;
		border-radius: 20rpx !important;
		position: relative;
		.verify{
			font-size: 34rpx;
			font-weight: bold;
			vertical-align: middle;
			display: flex;
			align-items: center;
			position: absolute;
			top: 50rpx;
			left: 50rpx;
			image{
				margin-right: 30rpx;
				width: 40rpx;
				height:40rpx
			}
		}
		.success{
			font-size: 30rpx;
			position: absolute;
			top: 120rpx;
			left: 120rpx;
		}
		button{
			background-color: #1872ff;
			color: #ffffff;
			width: 150rpx;
			position: absolute;
			bottom: 50rpx;
			right: 50rpx;
		}
	}
	.draftspopup {
		width: 680rpx;
		height: 350rpx;
		border-radius: 20rpx !important;
		position: relative;
		.verify{
			font-size: 34rpx;
			font-weight: bold;
			vertical-align: middle;
			display: flex;
			align-items: center;
			position: absolute;
			top: 50rpx;
			left: 50rpx;
		}
		.success{
			font-size: 30rpx;
			position: absolute;
			top: 120rpx;
			left: 50rpx;
		}
		button{
			background-color: #1872ff;
			color: #ffffff;
			width: 150rpx;
			position: absolute;
			bottom: 50rpx;
			right: 50rpx;
		}
	}
</style>